<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>导航条</title>
    <style>
        /*定义外观*/
        
        #menu {
            width: 720px;
            height: 40px;
            /*border:1px solid blue;*/
            /*居中*/
            margin: 50px auto;
            background-color: darkgoldenrod;
        }
        
        #menu a {
            color: white;
            font-size: 14px;
            /*去下划线*/
            text-decoration: none;
            /*字体加粗*/
            font-weight: 700;
            /*垂直居中*/
            line-height: 40px;
            /*a改为能设置宽和高的块级元素*/
            display: block;
            /*width: 70px;*/
            height: 40px;
            /*a标签在同一行显示*/
            float: left;
            /*（文字）词条之间距离相同*/
            padding: 0 19px;
        }
        
        #menu a:hover {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div id='menu'>
        <a href=''>首页</a>
        <a href=''>当地团购</a>
        <a href=''>美食</a>
        <a href=''>电影</a>
        <a href=''>酒店</a>
        <a href=''>饮品</a>
        <a href=''>KTV</a>
        <a href=''>休闲</a>

    </div>
</body>
<html>